import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { ListView, List } from 'antd-mobile'
import PropTypes from 'prop-types'
import ListViewItem from './listview_item'

const Item = List.Item;
const Brief = Item.Brief;
class MyInfoListView extends Component {
    constructor(props) {
        super(props)

        // const dataSource = new ListView.DataSource({
        //     rowHasChanged: (row1, row2) => row1 !== row2
        // })

        this.state = {
            dataSource: this.props.dataSource,
        }
    }
    static propTypes = {
        dataSource: PropTypes.any.isRequired
    }

    componentWillReceiveProps(nextProps) {

        if (nextProps.dataSource !== this.props.dataSource) {
            this.setState({
                dataSource: nextProps.dataSource,
            })
        }
    }

    render() {
        const row = (rowData, sectionID, rowID) => {
            return (
                <Item
                    multipleLine
                    extra={<div style={rowData.feature.status=='normal'?{color: 'green'}:{ color: 'red' }}>
                        {rowData.feature.status=='normal'?'一切正常':'疑似火灾'}
                    </div>}
                    onClick={() => {}}>
                    {rowData.name}
                    <Brief>
                    <em className={rowData.feature.status=='normal'?"aui-tags-normal":"aui-tags-emergency"}>温度{rowData.feature.temperature}° 湿度{rowData.feature.humidity}%</em>
                    </Brief>
                </Item>
            )
        }

        return (
            <ListView
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderRow={row}
                useBodyScroll={true}
            />
        )
    }
}

export default MyInfoListView